<!--全部案件-->
<template>
  <div>
    <tablePage ref="tablePage" canFold :defaultIsFold="true" :searchForm.sync="searchForm" :searchFormRules="searchFormRules" :requestFunc="requestFunc" :beforePlayLoad="beforePlayLoad">
      <template slot="search-form">
        <el-form-item label="案件名称" prop="title">
          <el-input v-model="searchForm.title" placeholder="请输入案件名称关键字"></el-input>
        </el-form-item>
        <el-form-item label="投诉人" prop="createUsername">
          <el-input v-model="searchForm.createUsername" placeholder="请输入投诉人"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile">
          <el-input v-model="searchForm.mobile" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="行政区划" prop="administrationCode">
          <el-cascader
            ref="departmentCascader"
            style="width: 100%"
            v-model="searchForm.administrationCode"
            :props="{ children: 'children', label: 'name', value: 'convertCode', expandTrigger: 'hover', emitPath: false, checkStrictly: true }"
            :options="departmentTree"
            :show-all-levels="false"
            @change="$refs.departmentCascader && $refs.departmentCascader.toggleDropDownVisible(false)"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="承办单位" prop="processDepartmentCode">
          <el-select v-model="searchForm.processDepartmentCode" @click.native="checkSelectedAdministrationCode" :no-data-text="searchForm.administrationCode ? '无数据' : '请先选择行政区划'" placeholder="请选择">
            <el-option v-if="processDepartmentTree.length && searchForm.administrationCode" label="全部" value=""></el-option>
            <el-option v-for="item in processDepartmentTree" :key="item.departmentCode" :label="item.departmentName" :value="item.departmentCode"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="案件编号" prop="workOrderNumber">
          <el-input v-model="searchForm.workOrderNumber" placeholder="请输入案件名称关键字"></el-input>
        </el-form-item>

        <el-form-item label="事发地" prop="addressId">
          <el-cascader
            style="width: 100%"
            ref="areaCascader"
            v-model="searchForm.addressId"
            :props="{ children: 'subList', label: 'name', value: 'id', expandTrigger: 'hover', emitPath: false, checkStrictly: true }"
            :options="areas"
            :show-all-levels="false"
            @change="$refs.areaCascader && $refs.areaCascader.toggleDropDownVisible(false)"
          />
        </el-form-item>

        <el-form-item label="案件状态" prop="status">
          <el-select v-model="searchForm.status" placeholder="请选择">
            <el-option v-for="item in statusArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="提交时间" prop="dateRange">
          <el-date-picker type="daterange" v-model="searchForm.dateRange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>

        <el-form-item label="受理时间" prop="filingTime">
          <el-date-picker type="daterange" v-model="searchForm.filingTime" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>

        <el-form-item label="办结时间" prop="finishTime">
          <el-date-picker type="daterange" v-model="searchForm.finishTime" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>

        <el-form-item label="案件来源" prop="itemSource">
          <el-select v-model="searchForm.itemSource" placeholder="请选择">
            <el-option v-for="item in sourceArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="案件类型" prop="itemDetailId">
          <el-select v-model="searchForm.itemDetailId" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option-group v-for="group in itemdetailTree" :key="group.label" :label="group.label">
              <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-option-group>
          </el-select>
        </el-form-item>

        <el-form-item label="结案反馈" prop="satisfactionLevel">
          <el-select v-model="searchForm.satisfactionLevel" placeholder="请选择">
            <el-option v-for="item in atisFactionLevelArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="是否公开" prop="publicStatus">
          <el-select v-model="searchForm.publicStatus" placeholder="请选择">
            <el-option v-for="item in publicStatusArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="是否过期" prop="expireFlag">
          <el-select v-model="searchForm.expireFlag" placeholder="请选择">
            <el-option v-for="item in expireFlagArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="评价状态" prop="appraiseStatus">
          <el-select v-model="searchForm.appraiseStatus" placeholder="请选择">
            <el-option v-for="item in appraiseStatusArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="isAuthority" label="行业领域" prop="industrySectorName">
          <el-select v-model="searchForm.industrySectorName" style="width: 100%">
            <el-option label="全部" value=""></el-option>
            <template v-for="item in vocations">
              <el-option v-if="item" :key="item.industrySectorName" :label="item.industrySectorName" :value="item.industrySectorName"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <div style="margin-left: 25px; display: inline-block">
          <!-- <el-form-item v-if="isCompetent" label="" prop="isFocusOnDepartment">
            <el-checkbox v-model="searchForm.isFocusOnDepartment" :true-label="1" :false-label="0">显示我关注的</el-checkbox>
          </el-form-item> -->
          <el-form-item label="" prop="supervisionTag">
            <el-checkbox v-model="searchForm.supervisionTag" :true-label="1" :false-label="0">跟踪的</el-checkbox>
          </el-form-item>
          <el-form-item label="" prop="exceptionTag">
            <el-checkbox v-model="searchForm.exceptionTag" :true-label="1" :false-label="0">异常的</el-checkbox>
          </el-form-item>
          <el-form-item label="" prop="historyTrack">
            <el-checkbox v-model="searchForm.historyTrack" :true-label="1" :false-label="0">历史跟踪</el-checkbox>
          </el-form-item>
          <el-form-item label="" prop="historyException">
            <el-checkbox v-model="searchForm.historyException" :true-label="1" :false-label="0">历史异常</el-checkbox>
          </el-form-item>
          <el-form-item label="" prop="untoHandle">
            <el-checkbox v-model="searchForm.untoHandle" :true-label="1" :false-label="0">待我办理</el-checkbox>
          </el-form-item>
        </div>
      </template>
      <template slot="left">
        <!--  <el-button v-if="isLeaderDepartment" @click="handleShowAddWorkOrderDialog" type="primary">创建案件</el-button> -->
        <!-- <el-button @click="handleImportDialog" v-if="isAdmin" type="primary" icon="img icon-add">批量导入投诉举报历史案件</el-button> -->
      </template>
      <template slot="rows">
        <tableColumnsCommon type="all" fixed="right" @showDetailsDialog="handleShowDialog('detailsDialog', $event)" @showLeaveMessageDialog="handleShowDialog('leaveMessageDialog', $event)"></tableColumnsCommon>
      </template>
    </tablePage>

    <detailsDialog type="all" :visible.sync="detailsDialog.visible" :id="currentRow.id" @read="handleReadComment" ref="detailsDialog">
      <template v-slot:footer-btn="{ details }">
        <!-- <acceptedButton :details="details" :rePlayLoadData="rePlayLoadData"></acceptedButton> -->
        <!-- <processButton :details="details" :rePlayLoadData="rePlayLoadData"></processButton> -->
        <!--  v-if="isProvincialLevel" -->
        <template>
          <template v-if="details.status === 5">
            <!-- 跟踪处理 -->
            <el-button v-if="(!details.supervisionTag || details.supervisionTag === '0') && isLeaderDepartment" @click="handleShowAddOrCancelSupervisionStatusDialog(1)" type="primary" plain>发起跟踪</el-button>
            <el-button v-if="['2'].includes(details.supervisionTag) && isLeaderDepartment" type="primary" plain @click="handleShowAddOrCancelSupervisionStatusDialog(5, details)">编辑跟踪</el-button>
            <el-button v-if="['1', '2'].includes(details.supervisionTag) && isLeaderDepartment" @click="handleShowAddOrCancelSupervisionStatusDialog(2)" type="primary" plain>解除跟踪</el-button>

            <!-- 异常处理 -->
            <el-button v-if="(!details.exceptionTag || details.exceptionTag === '0') && isLeaderDepartment" type="primary" plain @click="handleShowAddOrCancelSupervisionStatusDialog(4)">发起异常</el-button>
            <el-button v-if="['2'].includes(details.exceptionTag) && isLeaderDepartment" type="primary" plain @click="handleShowAddOrCancelSupervisionStatusDialog(6, details)">编辑异常</el-button>
            <el-button v-if="['1', '2'].includes(details.exceptionTag) && isLeaderDepartment" @click="handleShowAddOrCancelSupervisionStatusDialog(3)" type="primary" plain>解除异常</el-button>
          </template>
          <!-- <template v-if="[2, 3, 4].includes(details.status)">
            <el-button type="primary" @click="sendSupervision.visible = true">发起督办</el-button>
          </template> -->
        </template>
        <!-- <el-button v-if="details.status === 0 && details.auditFlag === 'N' && isLeaderDepartment" @click="copyToDialog.visible = true" type="primary" plain>抄送案件</el-button> -->
      </template>
    </detailsDialog>
    <leaveMessageDialog type="all" :visible.sync="leaveMessageDialog.visible" :workOrderNo="currentRow.workOrderNo" :id="currentRow.id" :canDelete="true" @read="handleReadLeaveMessage"></leaveMessageDialog>
    <!-- 导入弹窗-->
    <importDialog :visible.sync="importDialog.visible" @success="handleimportSuccess"></importDialog>

    <addOrCancelSupervisionStatusDialog :visible.sync="addOrCancelSupervisionStatusDialog.visible" :workOrder="currentRow" :type="addOrCancelSupervisionStatusDialog.type" @success="rePlayLoadData"></addOrCancelSupervisionStatusDialog>

    <copyToDialog :visible.sync="copyToDialog.visible" :workOrderNo="currentRow.workOrderNo"></copyToDialog>

    <!-- 创建弹窗-->
    <createWorkOrderDialog :visible.sync="createWorkOrderDialog.visible" :isEdit="createWorkOrderDialog.isEdit" :details="createWorkOrderDialog.details" @success="rePlayLoadData"></createWorkOrderDialog>

    <!-- TODO 发起督办 -->
    <send-supervision :visible.sync="sendSupervision.visible"></send-supervision>
  </div>
</template>

<script>
import tablePage from "@/components/tablePage/index.vue";
import searchFormItemsCommon from "@/views/workOrder/components/searchFormItemsCommon/searchFormItemsCommon";
import tableColumnsCommon from "@/views/workOrder/components/tableColumnsCommon";
import detailsDialog from "./components/detailsDialog.vue";
import leaveMessageDialog from "./components/leaveMessageDialog.vue";
import * as workOrderApi from "@/api/workOrder/index";
import { timeRemaining, workOrderPublicStatus, workOrderStatus } from "@/utils/filters";
import { defaultSearchFromForURLQueryMixin, initSearchForm, initSearchFormRules } from "./components/searchFormItemsCommon/mixin";
import importDialog from "./components/importDialog";
import { dict2Array, itemdetail2GroupOptions } from "@/utils/common";
import { workOrderAppraiseStatusDict, workOrderAtisFactionLevelDict, workOrderEventSourceDict, workOrderExpireFlagDict, workOrderPublicStatusDict, workOrderStatusDict } from "@/utils/dict";
import * as mattersApi from "@/api/matters";
import * as vocationAPI from "@/api/vocation";
import { isAuthority } from "@/api/userManage";
import addOrCancelSupervisionStatusDialog from "@/views/workOrder/components/addOrCancelSupervisionStatusDialog.vue";
import { queryProvincialLevel, confirm } from "@/api/workOrder/all";
import copyToDialog from "@/views/workOrder/components/copyToDialog.vue";
import acceptedButton from "@/views/workOrder/components/acceptedButton.vue";
import processButton from "@/views/workOrder/components/processButton.vue";
import createWorkOrderDialog from "@/views/workOrder/components/createWorkOrderDialog.vue";
import { rolePermissionsMixin } from "@/views/workOrder/mixin";
import SendSupervision from "./detailsComponents/SendSupervision.vue";
export default {
  name: "all",
  mixins: [defaultSearchFromForURLQueryMixin, rolePermissionsMixin],
  components: {
    tablePage,
    searchFormItemsCommon,
    detailsDialog,
    leaveMessageDialog,
    tableColumnsCommon,
    importDialog,
    addOrCancelSupervisionStatusDialog,
    copyToDialog,
    acceptedButton,
    processButton,
    createWorkOrderDialog,
    SendSupervision,
  },
  filters: { workOrderStatus, timeRemaining, workOrderPublicStatus },
  data() {
    return {
      createWorkOrderDialog: {
        details: {},
        isEdit: false,
        visible: false,
      },
      searchForm: initSearchForm({
        industrySectorName: "",
        // isFocusOnDepartment: 0,
        exceptionTag: 0,
        supervisionTag: 0,
        historyTrack: 0,
        historyException: 0,
        untoHandle: 0,
        expireFlag: "",
        addressCode: "",
        workOrderNumber: "",
        administrationCode: "",
        satisfactionLevel: "",
        addressId: "",
        finishTime: [],
        filingTime: [],
        createUsername: "",
        mobile: "",
      }),
      searchFormRules: initSearchFormRules(),
      currentRow: {},
      detailsDialog: {
        editDetails: {},
        visible: false,
      },
      leaveMessageDialog: {
        visible: false,
      },
      importDialog: {
        visible: false,
      },
      addOrCancelSupervisionStatusDialog: {
        visible: false,
        type: 1,
      },
      copyToDialog: {
        visible: false,
      },
      sendSupervision: {
        visible: false,
      },
      vocations: [],
      isCompetent: false,
      departmentTree: [],
      processDepartmentTree: [],
      itemdetailTree: [],
      appraiseStatusArr: dict2Array(workOrderAppraiseStatusDict, 1),
      publicStatusArr: dict2Array(workOrderPublicStatusDict, 1),
      statusArr: [],
      expireFlagArr: dict2Array(workOrderExpireFlagDict, 1),
      sourceArr: dict2Array(workOrderEventSourceDict, 1),
      atisFactionLevelArr: dict2Array(workOrderAtisFactionLevelDict, 1),
      areas: [],
      isAuthority: false,
      isProvincialLevel: false,
    };
  },
  watch: {
    "searchForm.administrationCode"(val) {
      this.processDepartmentTree = [];
      this.searchForm.processDepartmentCode = "";
      if (val) {
        this.getDepartmentTree();
      }
    },
  },
  created() {
    workOrderApi.all.isCompetent().then((r) => {
      this.isCompetent = r.result;
    });
    // this.getDepartmentTree();
    this.getItemdetailTree();
    vocationAPI.allList().then((r) => {
      this.vocations = r.result;
    });

    workOrderApi.distribute.area().then((res) => {
      this.areas = [
        // {name: '全部', id: ''},
        res.result,
      ];
    });

    workOrderApi.all.queryMySubList().then((res) => {
      const data = [res.result];
      // data.unshift({name: '全部', convertCode: ''})
      this.departmentTree = data;
    });

    isAuthority().then((r) => {
      // console.log(workOrderStatusDict, "workOrderStatusDict");
      this.isAuthority = r.result;
      this.statusArr = r.result ? dict2Array(workOrderStatusDict, 1) : dict2Array(workOrderStatusDict, 1, String, (status) => ["2", "3", "4", "5"].includes(status));
    });

    queryProvincialLevel().then((r) => {
      this.isProvincialLevel = r.result;
    });
  },
  methods: {
    requestFunc: workOrderApi.all.list,
    replenishSuccess() {
      this.rePlayLoadData();
      // this.$emit("replenishSuccess");
    },
    confirmSuccess() {
      this.rePlayLoadData();
    },
    clearFileInput() {
      document.getElementById("fileInput").value = "";
    },
    handleDownload(row) {
      fileApi.download({
        downloadFileName: row.fileName,
        filePath: row.fileUrl,
      });
    },

    handlePreview(row) {
      this.previewDialog = {
        visible: true,
        fileURL: row.fileUrl,
      };
    },

    handleShowAddWorkOrderDialog() {
      const dialog = "createWorkOrderDialog";
      this[dialog].details = {};
      this[dialog].isEdit = false;
      this.handleShowDialog(dialog, {});
    },
    beforePlayLoad(searchForm) {
      if (searchForm.finishTime && searchForm.finishTime.length) {
        searchForm.finishTimeEnd = searchForm.finishTime[1];
        searchForm.finishTime = searchForm.finishTime[0];
      }
      if (searchForm.filingTime && searchForm.filingTime.length) {
        searchForm.filingTimeEnd = searchForm.filingTime[1];
        searchForm.filingTime = searchForm.filingTime[0];
      }
      return searchForm;
    },
    rePlayLoadData() {
      this.$refs.tablePage.playLoadData();
      if (this.detailsDialog.visible) {
        this.$refs.detailsDialog.playLoadData();
      }
    },

    getItemdetailTree() {
      mattersApi.itemdetailTree().then((res) => {
        this.itemdetailTree = itemdetail2GroupOptions(res.result);
      });
    },
    getDepartmentTree() {
      workOrderApi.all.getProcessCodeList({ administrativeCode: this.searchForm.administrationCode }).then((res) => {
        this.processDepartmentTree = res.result;
      });
    },
    handleReadComment() {
      // this.currentRow.appraiseFlag = "N";
    },
    handleReadLeaveMessage() {
      this.currentRow.wordsFlag = "N";
    },
    handleShowDialog(type, row) {
      this[type].visible = true;
      this.currentRow = row;
    },
    handleCascaderChange() {
      this.$refs.processDepartmentCascader.toggleDropDownVisible(false);
    },
    handleImportDialog() {
      this.importDialog.visible = true;
    },
    handleimportSuccess() {
      this.importDialog.visible = false;
    },
    checkSelectedAdministrationCode() {
      if (!this.searchForm.administrationCode) {
        this.$message.warning("请先选择行政区划");
      }
    },
    handleShowAddOrCancelSupervisionStatusDialog(type, details) {
      this.addOrCancelSupervisionStatusDialog.visible = true;
      this.addOrCancelSupervisionStatusDialog.type = type;
      this.currentRow = { ...this.currentRow, ...details };
    },

    onCloseExceptionTag() {
      this.$confirm("是否确认关闭异常?", "提示")
        .then(() =>
          workOrderApi.all.closeException({
            workOrderNo: this.currentRow.workOrderNo,
          })
        )
        .then(() => this.$message.success("提交成功"));
    },
  },
};
</script>

<style scoped></style>
